<template>
  <iep-dialog :dialog-show="dialogShow" title="字典子项" width="700" @close="close">
    <iep-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 10px;"
      @click="handleEdit()"
    >添 加</iep-button>
    <iep-table
      :isLoadTable="isLoadTable"
      :columnsMap="columnsMap"
      :pagedTable="pagedTable"
      :is-pagination="false"
      is-tree
    >
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row._level <= 1" icon="el-icon-plus" @click="handleEdit(scope.row, scope.index, true)">子项</el-button>
          <el-button icon="el-icon-edit" @click="handleEdit(scope.row, scope.index)">编辑</el-button>
          <el-button icon="el-icon-delete" @click="handleDel(scope.row, scope.index)">删除</el-button>
        </template>
      </el-table-column>
    </iep-table>
    <child-dialog-form ref="ChildDialogForm" @load-page="loadPage"></child-dialog-form>
  </iep-dialog>
</template>
<script>
import { _initRow } from './options'
import { getChild, deleteChildById } from '@/api/dict'
import ChildDialogForm from './ChildDialogForm'
export default {
  components: { ChildDialogForm },
  data () {
    return {
      id: 1,
      methodName: '添加',
      dialogShow: false,
      pagedTable: [],
      columnsMap: [
        {
          label: 'ID',
          prop: 'id',
          width: 60
        },
        {
          label: '字典值',
          prop: 'value',
          width: 70
        },
        {
          label: '字典名',
          prop: 'label'
        },
        {
          label: '排序',
          prop: 'sort',
          width: 60
        }
      ],
      isLoadTable: false
    }
  },
  created () {
    this.loadPage()
  },
  methods: {
    close () {
      this.pagedTable = []
      this.dialogShow = false
    },
    loadPage () {
      this.isLoadTable = true
      this.$http({
        url: this.$http.adornUrl(getChild(this.id).url),
        method: getChild().method
      }).then(({ data }) => {
        this.pagedTable = data.data
        this.isLoadTable = false
      })
    },
    handleEdit (row, index, isChild) {
      const { ChildDialogForm } = this.$refs
      if (row) {
        ChildDialogForm.form = Object.assign({}, _initRow(this.id), row)
        ChildDialogForm.methodName = '修改'
      } else {
        ChildDialogForm.form = _initRow(this.id)
        ChildDialogForm.methodName = '添加'
      }
      if (isChild) {
        ChildDialogForm.form = _initRow(this.id)
        ChildDialogForm.methodName = `添加至<${row.label}>`
        ChildDialogForm.form.parentId = row.id
      }
      ChildDialogForm.dialogShow = true
    },
    handleDel (row) {
      this.$http({
        url: this.$http.adornUrl(deleteChildById(row.id).url),
        method: deleteChildById().method
      }).then(() => {
        this.loadPage()
      })
    }
  }
}
</script>
